<template>
	<view class="content">
		<view class="phone" style="margin-top: 69rpx;">
			<input class="inputPhone" type="number" placeholder="请输入手机号码" placeholder-class="phonePlaceSytle" maxlength="11" v-model="telNum" />
		</view>
		<view class="phone" style="margin-top: 24rpx;">
			<input class="inputPhone" type="number" placeholder="请输入验证码" placeholder-class="phonePlaceSytle" maxlength="4" v-model="verifCode" />
			<text class="getCode" v-if="!sendMsgDisabled" @click="getloginCode()">获取验证码</text>
			<text class="getCode" v-else>{{ codeTime }}秒后重新获取</text>
		</view>
		<!-- 提示文字 -->
		<view class="hint"><text v-text="checkText"></text></view>
		<view class="loginBtn flex-c"  :class="{ shaking: toShake }" @click="Enter()"><text>确认</text></view>
		<view class="protocolView">
			<image v-if="!isAgree" :src="staticUrl + '/image/login/dot.png'" style="width: 24rpx;height: 24rpx;" @click="agreeReadProtocol()"></image>
			<image v-if="isAgree" :src="staticUrl + '/image/login/dot_select.png'" style="width: 24rpx;height: 24rpx;" @click="agreeReadProtocol()"></image>
			<text class="Tips1" style="margin-left: 10rpx;">登录注册即表示您已阅读并同意易爱</text>
			<text class="Tips2" @click="toUserProtocol()">《用户协议》</text>
			<text class="Tips1">及</text>
			<text class="Tips2" @click="toPrivacyPolicy()">《隐私政策》</text>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	import * as api from '@/api/login';
	import {isNull} from '@/utils/utils.js'
export default {
	data() {
		return {
			staticUrl:this.$config.StaticUrl,
			userId:'',
			telNum: '',
			checkText: '', //提示性文字
			verifCode: '', //验证码
			getCodeText: '获取验证码',
			phoneReg: new RegExp(/^1[3-9]\d{9}$/), //手机号正则验证
			sendMsgDisabled: false,
			codeTime: 59,
			UUID:'', //本机的UUID
			isAgree:true,
			toShake: false
		};
	},
	onLoad() {
		this.userId = this.$store.state.userInfo.currentUser.userId;
		this.slefPhone = this.$store.state.userInfo.currentUser.phone;
	},
	methods: {
		errorAnimation(){
			this.toShake = true;
			setTimeout(() => {
				this.toShake = false;
			}, 2000);
		},
		// 同意并阅读协议
		agreeReadProtocol(){
			this.isAgree = !this.isAgree;
		},
		// 获取验证码
		getloginCode() {
			let that = this;
			//做非空判断
			let phoneNum = that.telNum;
			if (phoneNum.trim().length <= 0) {
				that.checkText = '请输入手机号';
				return;
			} else if (!that.phoneReg.test(phoneNum)) {
				that.checkText = '手机号格式错误';
				return;
			} else if(that.slefPhone === phoneNum){
				that.checkText = '您已经绑定了';
				return;
			}else {
				that.checkText = '';
			}
			that.sendMsgDisabled = true;
			// 开始切换文字倒计时
			let codeInterval = setInterval(() => {
				if (that.codeTime-- <= 1) {
					that.codeTime = 59;
					that.sendMsgDisabled = false;
					clearInterval(codeInterval);
				}
			}, 1000);
			//调用接口请求验证码
			let data = {
				userId:that.userId,
				action:"requestCode", 
				params: {
					mobile:that.telNum,
				 }
			};
			console.log(data);
			api.bindServiceForOthers(data).then(function (res) {
				console.log(res);
				if (res.data.code == 2000) {
					that.$taost('验证码已发送，请查收!');
				} else {
					that.$taost('请求出错，请重试!');
				}
			}).catch(function (error) {
				console.log('get verification fail', error);
			})
		},
		// 确认添加
		Enter() {
			let that = this;
			this.checkText = '';
			if(!that.isAgree){
				this.checkText = '阅读并同意协议后方可确认';
				return;
			}else if(that.telNum == ""){
				this.checkText = '手机号不能为空';
				return;
			}else if(!that.phoneReg.test(that.telNum)){
				that.checkText = '手机号格式错误';
				return;
			}else if (that.verifCode.trim().length <= 0) {
				this.checkText = '请输入验证码';
				return;
			} else {
				let data = {
					userId:that.userId,
					action:"bind", 
					params: {
						mobile:that.telNum,
						verificationCode:that.verifCode
					 }
				};
				console.log("login",data);
				api.bindServiceForOthers(data).then(function (res) {
					console.log(res);
					if(res.data.code == 2000){
						that.Jump();
					}else if(res.data.code == 2001){
						if(res.data.message == "该用户已有绑定的服务账户"){
							that.$toast('该用户已有绑定的服务账户');
							return;
						}else if(res.data.message == "验证码过期"){
							that.$toast('验证码过期,请重新获取');
							return;
						}else if(res.data.message == "该服务账户用户已满") {
							that.$toast('今日绑定用户数量已满');
							return;
						}
					}
				}).catch(function (error) {
					console.log('login fail', error);
					that.checkText = '请求出错,请重试!';
				})
			}
		},
		Jump(){
			uni.navigateTo({
				url: 'addSuccess/addSuccess'
			});
		},
		// 用户协议
		toUserProtocol() {
			console.log('用户协议');
			uni.navigateTo({
				url:'../../../mine/systemSetting/aboutUs/webView?index=0'
			});
		},
		// 隐私政策
		toPrivacyPolicy() {
			uni.navigateTo({
				url:'../../../mine/systemSetting/aboutUs/webView?index=1'
			});
		},
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.flex-c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.titleView {
	margin-top: 22rpx;
	width: 700rpx;
	display: flex;
	flex-direction: column;
}

.titleView text {
	font-size: 56rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	margin-left: 15rpx;
}

.phone {
	width: 700rpx;
	height: 122rpx;
	background-color: #ffffff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	position: relative;
}

.inputPhone {
	margin-left: 45rpx;
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}

.phonePlaceSytle {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}

.getCode {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659c7;
	position: absolute;
	right: 18px;
}
.hint {
	font-size: 28rpx;
	color: #f6464e;
	height: 20px;
	width: 80%;
	margin-top: 20rpx;
}
.loginBtn {
	width: 700rpx;
	height: 100rpx;
	border-radius: 50px;
	background-color: #0659c7;
	position: absolute;
	bottom: 230rpx;
}
.loginBtn1{
	width: 600rpx;
	height: 100rpx;
	border-radius: 50px;
	background-color: #b4c7a4;
	position: absolute;
	bottom: 70rpx;
}
.loginBtn:active{
	background-color: #007AFF;
}
.loginBtn text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ffffff;
}
.icon_wechat{
	width: 107rpx;
	height: 107rpx;
	margin-top: 245rpx;
}
.protocolView{
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 163rpx;
}
.Tips1{
	font-size: 22rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
.Tips2{
	font-size: 22rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659C7;
	line-height: 30px;
}
</style>
